<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <button onclick="change()">修改</button>
</body>
<script>
    var templateStr = `<div class="{{data.test > 1 ? 'red': ''}}">
        <div v-for="(item, index) in data.arr">
            <div>
                <span>{{index}}</span>
                <span>-</span>
                <span>{{item}}</span>
            </div>
        </div>
        <div v-if="data.obj.p > 1">if语句成功</div>
    </div>`;

    var data = {
        test: 1,
        arr: [1, 2],
        obj: {
            p: 1
        }
    }

    function render() {
        document.querySelector("#app").innerHTML = compile(templateStr)
    }

    function change() {
        data.test = 2;
        data.arr.push(3);
        data.obj.p = 2;
    }

    /**
     * 上个页面的tag(创建标签), loop(for循环), txt(创建文字节点), val(取值)四个方法复制过来
     * 实现compile
     * 要求点击修改按钮之后，页面发生变化
     */
</script>
</html>